//.

jQuery(function($) {
  /*
  $.getJSON('/api/46986414.js', function(result) {
    //var template = document.getElementById('card-template').innerHTML;

    //alert(result);

    //$("#root").append();
  });
  */

  var data = {
    "passcode": "46986414",
    "name": {
      "en": "Dark Magician",
      "zh": "黑魔术师"
    },
    "level": 7,
    "cardType": "monster",
    "types": {
      "en": "Spellcaster / Normal",
      "zh": "魔法师族"
    },
    "attribute": "dark",
    "ATK": 2500,
    "DEF": 2100,
    "descriptions": {
      "en": "The ultimate wizard in terms of attack and defense.",
      "zh": "作为魔法师，攻击力·守备力都是最高级别。",
    }
  };
  var source = document.getElementById('card-template').innerHTML;
  var template = Handlebars.compile(source);
  var cardTypeList = {
    "monster": '0 33.33%'
  };
  var attributeList = {
    "dark": '0 -280px'
  };

  var subtitle = '';
  var descriptions = '';

  if( data['cardType'] == 'monster' || data['cardType'] == 'fusion' ) {

    for(var i = 0; i < data.level; i++) {
      subtitle += '<i class="level"></i>';
    }

    descriptions += '<h3>【' + data['types']['zh'] + '】</h3>';
    descriptions += '<p>' + data['descriptions']['zh'] + '</p>';
    descriptions += '<div class="monster">' +
      '<span><span class="tag">AKT/</span>' + data['ATK'] + '</span>' +
      '<span><span class="tag">DEF/</span>' + data['DEF'] + '</span>' +
    '</div>';
  }

  if( data['cardType'] == 'spell' || data['cardType'] == 'trap' ) {

    if( data['cardType'] == 'spell' ) {
      subtitle += '【魔法卡' + '<i class="mode" style="background-position: 100% ' + data.mode * 150 +'px;"></i>' + '】';
    }
    if( data['cardType'] == 'trap' ) {
      subtitle += '【陷阱卡】';
    }

    descriptions += '<p>' + data['descriptions']['zh'] + '</p>';
  }

  var html = template({
    passcode: data.passcode,
    title: data.name.zh,
    subtitle: subtitle,
    typePosition: cardTypeList[data.cardType],
    attrPosition: attributeList[data.attribute],
    descriptions: descriptions,
  });

  console.log( data, source, html );

  $("#root").append(html);

  console.log('Hello World');


  $("#root").on("click", ".card", function(e) {
    var $that = $(this);

    if( $that.hasClass('positive') ) {
      $that.removeClass('positive').addClass("negative");
      return;
    }
    if( $that.hasClass('negative') ) {
      $that.removeClass('negative').addClass("flat");
      return;
    }
    if( $that.hasClass('flat') ) {
      $that.removeClass('flat').addClass("positive");
      return;
    }

  });

});
console.log('123');
